<template>
    <view class="template">
        <image class="theme" src="@/pages/compoundPages/static/posterPage/template2/theme.jpg" mode="widthFix"></image>
        <view class="list-wrap" v-if="photosList.length > 0">
            <view class="item-group" v-for="(item, index) in modeList" :key="index">
                <view class="item" v-for="(item2, index2) in item" :key="index2" :class="`item` + index2">
                    <LazyImage class="photo" :class="`photo` + item2.imageIndex" :imageStyle="imageStyle" :src="item2.image_url_c" mode="aspectFill"></LazyImage>
                    <image
                        :class="`icon` + item2.imageIndex"
                        v-if="iconArr.includes(item2.imageIndex)"
                        :src="`../../static/posterPage/template2/icon` + item2.imageIndex + `.png`"
                        mode=""
                    ></image>
                    <image class="mode" :src="`../../static/posterPage/template2/mode` + item2.imageIndex + `.png`" mode="widthFix"></image>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
import LazyImage from '@/components/LazyImage/index.vue';
import { mapList, getItemIndex } from '@/common/common.js';
export default {
    name: 'Template0',
    data() {
        return {
            modeList: [],
            modeArr: [1, 1, 1, 1, 1, 1, 1, 1],
            defaultPhotoPath: require('@/pages/compoundPages/static/posterPage/default.png'),
            imageStyle: {
                borderRadius: '2rpx'
            },
            iconArr: [0, 2, 7]
        };
    },
    props: {
        photosList: {
            type: Array,
            default: function() {
                return [];
            }
        }
    },
    computed: {},
    created() {},
    onLoad() {},
    onShow() {},
    methods: {
        getList() {
            this.modeList = mapList(this.modeArr, this.photosList, this.defaultPhotoPath);
            console.log(this.modeList);
        }
    },
    watch: {
        photosList: {
            handler(newVal, oldVal) {
                if (newVal.length > 0) {
                    this.getList();
                }
            },
            immediate: true,
            deep: true
        }
    },
    components: { LazyImage }
};
</script>
<style lang="scss">
.template {
    .theme {
        width: 100%;
    }
    .list-wrap {
        width: 660rpx;
        margin: 45rpx 45rpx 0;
        background: #f4fff8;
        border-radius: 10rpx;
        .item-group {
            width: 100%;
            position: relative;
            .item {
                width: 100%;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 1;
                .mode {
                    position: relative;
                    width: 750rpx;
                    left: 50%;
                    top: 0;
                    transform: translate(-50%, 0);
                }
                .photo {
                    position: absolute;
                    border-radius: 10rpx;
                    z-index: 2;
                }
            }
            .item0 {
                position: relative;
                left: 0;
                top: 0;
            }
        }
        .photo0 {
            left: 124rpx;
            top: 73rpx;
            width: 479rpx;
            height: 323rpx;
            border-radius: 100%;
        }
        .icon0 {
            position: absolute;
            left: 51rpx;
            top: 24rpx;
            width: 101rpx;
            height: 283rpx;
            z-index: 3;
        }
        .photo1 {
            left: 309rpx;
            top: 45rpx;
            width: 293rpx;
            height: 397rpx;
        }
        .photo2 {
            left: 71rpx;
            top: 38rpx;
            width: 397rpx;
            height: 277rpx;
        }
        .icon2 {
            position: absolute;
            left: 387rpx;
            top: 30rpx;
            width: 248rpx;
            height: 387rpx;
            z-index: 3;
        }
        .photo3 {
            left: 89rpx;
            top: 44rpx;
            width: 457rpx;
            height: 298rpx;
        }
        .photo4 {
            left: 159rpx;
            top: 42rpx;
            width: 457rpx;
            height: 298rpx;
        }
        .photo5 {
            left: 133rpx;
            top: 52rpx;
            width: 457rpx;
            height: 298rpx;
        }

        .photo6 {
            left: 135rpx;
            top: 36rpx;
            width: 209rpx;
            height: 298rpx;
        }
        .photo7 {
            left: 177rpx;
            top: 94rpx;
            width: 457rpx;
            height: 298rpx;
        }
        .icon7 {
            position: absolute;
            left: 80rpx;
            top: 28rpx;
            width: 178rpx;
            height: 143rpx;
            z-index: 3;
        }
    }
}
</style>
